<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smile</title>
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css" >
    <!-- 引入 bootstar.css -->
   <link rel="stylesheet" th:href="@{/static/css/bootstrap.css}">
   <link rel="stylesheet" th:href="@{/static/css/index.css}">
   
    <!-- 引入 layui.js -->
    <script src="/static/lib/layui/layui.js"></script>
   <script src="/static/js/jquery.min.js"></script>
   <script src="/static/js/bootstrap.js"></script>
   <script src="/static/js/scriptindex.js"></script>
   <script src="/static/js/highcharts.js"></script>
   <script src="/static/js/highcharts-3d.js"></script>
</head>
<body  style="background-image: url('../static/img/bj.png');">
<script type="text/javascript">
   function bj(){
	  var opacity = document.getElementById("daohang").style.opacity;
	  if(opacity<1){
	    document.getElementById("daohang").style.opacity=1;
	  }else{
	    document.getElementById("daohang").style.opacity=0.8;
	  }
	 
	  if( ($("#fill").css("display"))!="none"){
	    $("#fill").css("display","none");
	  }else{
	    $("#fill").css("display","list-item");
	  }
	  }
	    
	    
	    
		 //这个不是写在首页，写在子页面（子页面才能返回，写在首页点击返回就是退出）
//不用引入mui.js，都是h5方法
document.addEventListener('plusready', function() {
    var webview = plus.webview.currentWebview();
    plus.key.addEventListener('backbutton', function() {
        webview.canBack(function(e) {
            if(e.canBack) {
                webview.back();
            } else {
                webview.close(); //hide,quit
                //plus.runtime.quit();
            }
        })
    });
});
	  
	  
</script>

<!-- 头部的模板 -->
<div th:replace="fragment/head::head"></div> 
 
 
 
 

    <div class="container mt-4" >
    
       <!-- 公告 -->
       <div class="row">
         <div class="col-md-12 col-12 " >
           <p id="kuang" class="layui-anim layui-anim-scaleSpring tou">
           <a href="/blog/index" style="margin-left: 30px;color: darkgray">网站首页 </a>  
           <i class="icon angle double right"> </i>
              归档    <i class="icon angle double right"> </i>
            <span> 博文统计</span> 
          
           </p>
         </div>
       </div>
    
    
         <div class="row">
           <div class="col-sm-12" style="margin-top:20px">
           
              <div id="3d-zhu"></div>
              
               <div id="sliders" style="background-color:white; padding-left: 20px">
               <table>
                   <tr>
                     <td>α 角（内旋转角）</td>
                     <td><input id="alpha" type="range" min="0" max="45" value="15"/> <span id="alpha-value" class="value"></span></td>
                   </tr>
                   <tr>
                      <td>β 角（外旋转角）</td>
                      <td><input id="beta" type="range" min="-45" max="45" value="15"/> <span id="beta-value" class="value"></span></td>
                   </tr>
                   <tr>
                      <td>深度</td>
                      <td><input id="depth" type="range" min="20" max="100" value="50"/> <span id="depth-value" class="value"></span></td>
                   </tr>
            </table>
        </div>
        
           </div>
        </div>
    
      <div class="row">
      <div class="col-sm-12" style="margin-top: 50px">
      
      
   <div class="timeline-box ">
	
 <h4><i class="layui-icon layui-icon-time"></i>&nbsp; 文章发布时间轴</h4>
    <ul class="layui-timeline">
  <li th:each="blog,blogStat:${bloglist}"  class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
    <div class="layui-timeline-content layui-text">
      <h3  th:text="${blog.getReleaseDate()}" class="layui-timeline-title">日期</h3>
      
     
            <div class="mt-3 tou fangda" style="background-color: white;padding-right:15px;">
                <div class="media" style="padding-left:15px;padding-top:10px;padding-bottom: 15px " >     
                  <img th:src="${blog.imgurl}" alt="背景图" style="width:35%">
                  <div class="media-body" style="margin-left: 20px">
                  <a th:href="@{'/blog?id='+${blog.id}}" class="lianjie"> <span class="mt-0 bolgtitle" th:text="${blog.title}"></span></a> &nbsp;
                  <span class="ui green label" style="font-size:7px">原创</span>
                  
                  <span th:if="${blog.id==bloglistre[0].id || blog.id==bloglistre[1].id || blog.id==bloglistre[2].id || blog.id==bloglistre[3].id || blog.id==bloglistre[4].id}"> <img alt="" src="../static/img/hot.png" style="width:30px;margin-top: -8px"> </span>
                  <p class="jianjie"  th:text="${blog.getSummary()}" style="font-size: 14px;text-indent: 2em;margin-top: 3px"> </p>
                 
                  </div> 
                 </div>
           
               
               <p class="shiying" style="color:darkgray;margin-left: 15px;margin-bottom: 15px">
                   <i class="layui-icon layui-icon-friends" style="font-size:0.8rem;color: darkgray"></i> <span href="#" >益达</span>
                   <i class="layui-icon layui-icon-time" style="font-size:0.8rem;color: darkgray"></i> <span  th:text="${blog.getReleaseDate()}"></span>
                     
                 <!-- 眼睛 -->
                 <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-eye" viewBox="0 0 16 16"><path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8zM1.173 8a13.133 13.133 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13.133 13.133 0 0 1 14.828 8c-.058.087-.122.183-.195.288-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5c-2.12 0-3.879-1.168-5.168-2.457A13.134 13.134 0 0 1 1.172 8z"/><path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zM4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0z"/></svg>
                 <span th:text="${blog.getClickHit()}"></span>
                  
                  <!-- 评论 -->
                 <svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" fill="currentColor" class="bi bi-chat-square-dots" viewBox="0 0 16 16">
                      <path d="M14 1a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1h-2.5a2 2 0 0 0-1.6.8L8 14.333 6.1 11.8a2 2 0 0 0-1.6-.8H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1h12zM2 0a2 2 0 0 0-2 2v8a2 2 0 0 0 2 2h2.5a1 1 0 0 1 .8.4l1.9 2.533a1 1 0 0 0 1.6 0l1.9-2.533a1 1 0 0 1 .8-.4H14a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2z"/>
                      <path d="M5 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0zm4 0a1 1 0 1 1-2 0 1 1 0 0 1 2 0z"/>
                 </svg>
                 <span th:text="${blog.replyHit.size()}"></span>


                    <a href="#" class="lianjie2">       
                      <i class="layui-icon  layui-icon-note " style="font-size:1.8em"></i>
                      <span style="text-align: right"  th:text="${blog.getTypeID().getType()}"></span>
                    </a>
                 
                   </p>
               
             </div>
             
             
  </li>
  

</ul>

    </div>  
      
   </div>
    </div>
    
    <div class="row">
     <div class="col-sm-12 top">
            <ul class="pagination" style="margin:0 auto;width:207px">
              <li class="page-item"><a class="page-link" th:href="@{/archived?page=1}">首页</a></li>
              <li class="page-item"><a class="page-link" th:href="@{'/archived?page='+${cpage-1<=0?1:cpage-1}}">  < </a></li>
              <li class="page-item"><a class="page-link" th:text="${cpage}+'/'+${pages}">  </a></li>
              <li class="page-item"><a class="page-link" th:href="@{'/archived?page='+${cpage+1>=pages?pages:cpage+1}}">  > </a></li>
              <li class="page-item"><a class="page-link" th:href="@{'/archived?page='+${pages}}">尾页</a></li>
            </ul>
         </div> 
      </div>
      
      
      
    </div>

</body>
<script type="text/javascript">

  var months = [];
      months[0] = [[${monthsum[0]}]];
      months[1] = [[${monthsum[1]}]];
      months[2] = [[${monthsum[2]}]];
      months[3] = [[${monthsum[3]}]];
      months[4] = [[${monthsum[4]}]];
      months[5] = [[${monthsum[5]}]];
      months[6] = [[${monthsum[6]}]];
      months[7] = [[${monthsum[7]}]];
      months[8] = [[${monthsum[8]}]];
      months[9] = [[${monthsum[9]}]];
      months[10] = [[${monthsum[10]}]];
      months[11] = [[${monthsum[11]}]];
    
  var chart = new Highcharts.Chart({
		chart: {
				renderTo: '3d-zhu',
				type: 'column',
				options3d: {
						enabled: true,
						alpha: 15,
						beta: 15,
						depth: 50,
						viewDistance: 25
				}
		},
		title: {
				text: '3D统计图'
		},
		xAxis: {
		            title: {
			               text: '月份'                // y 轴标题
			                },
			     categories: [1,2,3,4,5,6,7,8,9,10,11,12]   // x 轴分类
			     
			    },
		 yAxis: {
			      title: {
			               text: '发布文章数'                // y 轴标题
			                }
			     },
		subtitle: {
				text: '可通过滑动下方滑块测试'
		},
		
		plotOptions: {
				column: {
						depth: 25
				}
		},
		series: [{
				name:'发布数',
				data: months
		}],
		credits: {
                       enabled: true, // logo设置
                       text:'Smile'
                  }
});

// 将当前角度信息同步到 DOM 中
var alphaValue = document.getElementById('alpha-value'),
		betaValue = document.getElementById('beta-value'),
		depthValue = document.getElementById('depth-value');
function showValues() {
		alphaValue.innerHTML = chart.options.chart.options3d.alpha;
		betaValue.innerHTML = chart.options.chart.options3d.beta;
		depthValue.innerHTML = chart.options.chart.options3d.depth;
}
// 监听 sliders 的变化并更新图表
$('#sliders input').on('input change', function () {
		chart.options.chart.options3d[this.id] = this.value;
		showValues();
		chart.redraw(false);
});
showValues();


</script>
</html>